<template>
    <div class="page">
        <el-tabs type="border-card" @tab-click="handleClick">
            <el-tab-pane label="商品分类">
                <el-collapse accordion>
                    <el-collapse-item title="创建分类" name="1">
                        <div class="border-card_type">
                            <span class="font">分类名：</span>
                            <el-input class="border-card_type_name" v-model="commodityTypelist.dishTypeName"  @input="change($event)" placeholder="请输入分类名"></el-input>
                            <el-button type="primary" style="width: 20vw;margin: 1vw 0  0 25vw" @click="addCommodityType()"> 添加分类 </el-button>
                        </div>
                    </el-collapse-item>
                </el-collapse>
                <div>
                    <div class="card_type">分类列表<el-image class="vip_img" :src="require('/public/image/vip/paixu.png')"></el-image></div>
                </div>
                <div >
                    <el-table
                            :data="categorylist"
                            style="width: 100%">
                        <el-table-column
                                prop="dishTypeId"
                                label="编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="dishTypeName"
                                label="菜品分类">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="updIsEditcategory(scope.row)">编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm = 'delDishType(scope.row.dishTypeId)'>
                                <el-button slot="reference" size="mini"> 删除 </el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="test"
                            @current-change="test"
                            :current-page.sync="dishTypeQuery.page.current"
                            :page-size.sync="dishTypeQuery.page.size"
                            :page-sizes="[5, 10]"
                            layout="total, prev, pager, next,sizes"
                            >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品管理">
                <div class="Dishes_Type">
                    <el-button size="mini" @click="isAddDishes = true" class="left_button left">添加商品</el-button>
                    <el-input size="mini"  v-model="findmenuName"  class="right_input right" placeholder="请输入内容"></el-input>
                    <el-button size="mini" @click="findMenu()" class="right_button right">搜索商品</el-button>
                </div>
                <div class="table">
                    <template>
                        <el-table
                                ref="multipleTable"
                                :data="findMenuAll"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    prop="menuId"
                                    label="id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="menuimg"
                                    label="图片"
                                    width="180">
                                <template slot-scope="scope">
                                    <div class="img-meal">
                                        <div class="demo-image__placeholder">
                                            <div class="block-tp">
                                                <el-image style="width: 150px;height: 80px;border-radius: 15px"
                                                          :src="scope.row.menuImg">
                                                </el-image>
                                            </div>
                                        </div>
                                    </div>
                                </template>d
                            </el-table-column>
                            <el-table-column
                                    prop="menuName"
                                    label="名称"
                                    width="130">
                            </el-table-column>
                            <el-table-column
                                    prop="dishTypeName"
                                    label="分类"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="menuPrice"
                                    label="价格"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="规格"
                                    width="85.5">
                                <div class="specification">
                                    <button type="button" @click="material = true" class="btn btn-default btn-xs btn-block" onclick="">原料</button>
                                    <button type="button" @click="isclaim = true" class="btn btn-default btn-xs btn-block" onclick="">要求</button>
                                </div>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="findMenuId(scope.row)" type="primary" class="btn btn-default btn-xs btn-block">编辑</el-button>
                                        <el-popconfirm title="确定删除吗？" @confirm = 'delMenuId(scope.row.menuId)'>
                                            <el-button slot="reference" class="btn btn-default btn-xs btn-block"> 删除 </el-button>
                                        </el-popconfirm>
                                    </template>
                            </el-table-column>

                            <el-table-column
                                    prop=""
                                    label="热门"
                                    width="100">
                                <template slot-scope="scope">
                                    <div v-if = "scope.row.popular === 1">
                                        <el-image  style="width: 20px;height: 20px" @click="updPopulaFalse(scope.row.menuId)" :src=" require('../../../public/image/DishesManagement/duigou.png')"></el-image>
                                    </div>
                                    <div v-else>
                                        <el-image  style="width: 20px;height: 20px" @click="updPopulaTrue(scope.row.menuId)"  :src="require('../../../public/image/DishesManagement/gouw.png')"></el-image>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    prop="recommend"
                                    label="推荐"
                                    width="100">
                                <template slot-scope="scope">
                                    <div v-if = "scope.row.recommend === 1">
                                        <el-image  style="width: 20px;height: 20px" @click="updrecommendFalse(scope.row.menuId)" :src="require('../../../public/image/DishesManagement/xin.png')"></el-image>
                                    </div>
                                    <div v-else>
                                        <el-image  style="width: 20px;height: 20px" @click="updrecommendTrue(scope.row.menuId)" :src="require('../../../public/image/DishesManagement/xin2.png')"></el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="discount"
                                    label="打折"
                                    width="100">
                                <template slot-scope="scope">
                                    <div v-if = "scope.row.discount === 1">
                                        <el-image  style="width: 20px;height: 20px" @click="upddiscountFalse(scope.row.menuId)"  :src="require('../../../public/image/DishesManagement/gou.png')"></el-image>
                                    </div>
                                    <div v-else>
                                        <el-image  style="width: 20px;height: 20px" @click="upddiscountTrue(scope.row.menuId)"  :src="require('../../../public/image/DishesManagement/chacha.png')"></el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="putontheshelf"
                                    label="上架"
                                    width="100">
                                <template slot-scope="scope">
                                    <div v-if = "scope.row.putontheshelf === 1">
                                        <el-image  style="width: 20px;height: 20px" @click="updputontheshelfFalse(scope.row.menuId)"  :src="require('../../../public/image/DishesManagement/gou.png')"></el-image>
                                    </div>
                                    <div v-else>
                                        <el-image  style="width: 20px;height: 20px" @click="updputontheshelfTrue(scope.row.menuId)"  :src="require('../../../public/image/DishesManagement/chacha.png')"></el-image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="instock"
                                    label="库存"
                                    width="100">
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="menuFindAll"
                                @current-change="menuFindAll"
                                :current-page.sync="menuBo.page.current"
                                :page-size.sync="menuBo.page.size"
                                :page-sizes="[5, 10]"
                                layout="total, prev, pager, next,sizes"
                                :total="dataTotal">
                        </el-pagination>
                    </template>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="dialog">
            <!-- 添加菜品 isAddDishes -->
            <el-dialog
                    title="添加菜品"
                    :visible.sync="isAddDishes"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                 <div class="add-input" >
                        套餐主图:
                        <input type="file" id="istImageFile" @change="imageToBase64($event)"/>
                    </div>
                <div class="dialog_pwd xinxi">菜品名称：
                    <el-input  @input="change($event)" v-model="addDishes.menuName" class="name_text" placeholder="请输入商品名称"></el-input>
                </div>
                <div class="dialog_phone">菜品分类：
                     <el-select style="width: 80% ; margin-top:1vw" v-model="addDishes.dishTypeId" @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in categorylist"
                                :key="item.dishTypeId"
                                :label="item.dishTypeName"
                                :value="item.dishTypeId">
                        </el-option>
                      </el-select>
                </div>
                <div class="dialog_phone">菜品口味：
                     <el-select style="width:80%;margin-top:1vw" v-model="addDishes.flavorId"  @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in flavorList"
                                :key="item.flavorid"
                                :label="item.flavorName"
                                :value="item.flavorid">
                        </el-option>
                      </el-select>
                </div>
                <div class="dialog_phone">菜品介绍：
                    <el-input  @input="change($event)" v-model="addDishes.details" class="name_text" style="margin-top: 15px" placeholder="请输入介绍（非必填）"></el-input>
                </div>
                <div style="margin-top: 15px">
                    <span style="padding-right:15%">价格：</span><span style="padding-right:15%">是否折扣：</span><span style="padding-right:10%">折扣价：</span>
                </div>
                <div>
                    <el-input   @input="change($event)" class="boottom_text" v-model="addDishes.menuPrice" style="margin-top: 15px" placeholder="请输入价格"></el-input>
                     <el-select style="width: 20%;margin-left: 3%"  v-model="addDishes.discount"   @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in isdiscount"
                                :key="item.id"
                                :label="item.value"
                                :value="item.id">
                        </el-option>
                      </el-select>
                    <span v-if = "addDishes.discount === 1">
                        <el-input @input="change($event)" v-model="addDishes.discount_price" class="boottom_text" style="margin-top: 15px" placeholder="请输入折扣价"></el-input>
                    </span>
                    <span v-else>
                        <el-input @input="change($event)" :disabled="true" v-model="addDishes.discount_price" class="boottom_text" style="margin-top: 15px" placeholder="请输入折扣价"></el-input>
                    </span>
                </div>
                <el-button class="xinxi" @click="doAddMenu()" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
            </el-dialog>
            <!-- 添加图片 pushimg -->
            <el-dialog
                    title="图片"
                    :visible.sync="pushimg"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                <el-upload
                        class="upload-demo"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture"
                        :auto-upload="false">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
            </el-dialog>
            <!-- 原料 material -->
            <el-dialog
                    title="关联物料"
                    :visible.sync="material"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                <div class="materia">
                        <div class="materialname">
                            <div></div>
                        </div>
                        <div class="materiaAttributes">
                            <el-select style="width: 15%;padding-left: 3vw" size="mini" v-model="DishType.dishTypeName"  @input="change($event)" placeholder="请选择">
                              <el-option
                                    v-for="item in categorylist"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.num">
                              </el-option>
                            </el-select>
                            <el-select style="width: 15%;padding-left: 3vw" size="mini" v-model="DishType.dishTypeName" @input="change($event)" placeholder="请选择">
                                  <el-option
                                          v-for="item in categorylist"
                                          :key="item.value"
                                          :label="item.name"
                                          :value="item.num">
                                  </el-option>
                              </el-select>
                            <el-input class="meterialusenum" style="padding-left: 3vw"  size="mini" @input="change($event)"></el-input>kg
                            <el-button size="mini" style="margin-left: 3vw"  >关联</el-button>
                        </div>
                     </div>
            </span>
            </el-dialog>
            <!-- 特殊要求 isclaim -->
            <el-dialog
                    title="编辑特殊要求"
                    :visible.sync="isclaim"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                <div class="claim">
                    <div class="dialog_pwd xinxi">特殊要求名称：
                    <el-input   @input="change($event)" class="claim_text" placeholder="请输入特殊要求名称"></el-input>
                    <el-button type="primary">添加特殊要求</el-button>
                </div>
                </div>
            </span>
            </el-dialog>
            <!-- 修改 isedit -->
            <el-dialog
                    title="修改菜品"
                    :visible.sync="isedit"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                 <div class="add-input" >
                        套餐主图:
                        <input type="file" id="updImageFile" @change="updimageToBase64($event)"/>
                    </div>
                <div class="dialog_pwd xinxi">菜品名称：
                    <el-input  @input="change($event)" v-model="findMenuIDList.menuName" class="name_text" placeholder="请输入商品名称"></el-input>
                </div>
                <div class="dialog_phone">菜品分类：
                     <el-select style="width: 80% ; margin-top:1vw" v-model="findMenuIDList.dishTypeId" @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in categorylist"
                                :key="item.dishTypeId"
                                :label="item.dishTypeName"
                                :value="item.dishTypeId">
                        </el-option>
                      </el-select>
                </div>
                <div class="dialog_phone">菜品口味：
                     <el-select style="width:80%;margin-top:1vw" v-model="findMenuIDList.flavorId"  @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in flavorList"
                                :key="item.flavorid"
                                :label="item.flavorName"
                                :value="item.flavorid">
                        </el-option>
                      </el-select>
                </div>
                <div class="dialog_phone">菜品介绍：
                    <el-input  @input="change($event)" v-model="findMenuIDList.details" class="name_text" style="margin-top: 15px" placeholder="请输入介绍（非必填）"></el-input>
                </div>
                <div style="margin-top: 15px">
                    <span style="padding-right:15%">价格：</span><span style="padding-right:15%">是否折扣：</span><span style="padding-right:10%">折扣价：</span>
                </div>
                <div>
                    <el-input   @input="change($event)" class="boottom_text" v-model="findMenuIDList.menuPrice" style="margin-top: 15px" placeholder="请输入价格"></el-input>
                     <el-select style="width: 20%;margin-left: 3%" v-model="findMenuIDList.discount"   @input="change($event)" placeholder="请选择">
                        <el-option
                                v-for="item in isdiscount"
                                :key="item.id"
                                :label="item.value"
                                :value="item.id">
                        </el-option>
                      </el-select>
                    <span v-if = "addDishes.discount === 1">
                        <el-input @input="change($event)" v-model="addDishes.discount_price" class="boottom_text" style="margin-top: 15px" placeholder="请输入折扣价"></el-input>
                    </span>
                    <span v-else>
                        <el-input @input="change($event)" :disabled="true" v-model="addDishes.discount_price" class="boottom_text" style="margin-top: 15px" placeholder="请输入折扣价"></el-input>
                    </span>
                </div>
                <el-button class="xinxi" @click="updMenuAll()" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
            </el-dialog>
            <!-- 编辑餐具 -->
            <el-dialog
                    title="修改餐具"
                    :visible.sync="isedittableware"
                    width="50%"
                    center>
            <span slot="footer" class="dialog-footer">
                <el-image src=""></el-image>
                <el-upload
                        class="upload-demo"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture"
                        :auto-upload="false">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                <div class="dialog_pwd xinxi" style="margin-top: 1vw">名称：
                    <el-input @input="change($event)" class="name_text" placeholder="请输入商品名称"></el-input>
                </div>
                <div style="margin-top: 15px">
                    <span style="padding-right:35%">单价：</span>
                    <span style="padding-right:40%">单位：</span>
                </div>
                <div>
                    <el-input   @input="change($event)" class="boottom_textss" style="margin-top: 15px" placeholder="请输入价格"></el-input>
                    <el-input  @input="change($event)" class="boottom_textss" style="margin-top: 15px" placeholder="请输入单位"></el-input>
                </div>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary">完成</el-button>
            </span>
            </el-dialog>
            <!-- 编辑菜品分类 -->
            <el-dialog
                    title="编辑菜品分类"
                    :visible.sync="isEditcategory"
                    width="50%"
                    center>
                <div class="add-input" >
                    套餐主图:
                    <input type="file" id="" @change="imageToBase64($event)"/>
                </div>
            <span slot="footer" class="dialog-footer">
                <span>商品分类名称：</span>
                <el-input @input="change($event)" v-model="DishType.dishTypeName" class="name_text" placeholder="输入分类名称"></el-input>
                <el-button class="xinxi" style="width: 50%;margin-top: 25px" type="primary" @click="doIdupdDishType" >修改</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

  export default {
    name: "DishesManagement",
    data() {
      return {
        //上传图片属性
        //更新菜品分类
        //分页
        menuBo: {
          page: {
            current: 1,
            size: 6
          },
        },
        findmenuName:"",
        tokenid:'1',
        DishType: {
          dishTypeId: '',
          dishTypeName: '',
        },

        handleSelectionChange: [],
        //图片上传
        fileList: [{}],
        card_type_name: '',
        //商品分类搜索框
        Type_input: '',
        //商品管理表格集合
        tableData: [{
          img: require('../../../public/image/DishesManagement/ia_100000010.png'),
          popular_img: require('../../../public/image/DishesManagement/duigou.png'),
          popular_imgw:require('../../../public/image/DishesManagement/gouw.png'),
          recommend: require('../../../public/image/DishesManagement/xin.png'),
          discount: require('../../../public/image/DishesManagement/chacha.png'),
          up: require('../../../public/image/DishesManagement/duigou.png'),
        }],
        //
        updmenuList:[],
        //添加菜品集合
        addDishes: {
          //菜品名称
          menuName: '',
          //菜品单价
          menuPrice: '',
          //菜品状态(0下架，1上架)
          menuState: '1',
          //菜品月销量
          menuCount: '0',
          //菜品口味
          flavorId: '',
          //菜品分类Id
          dishTypeId: '',
          //菜品图片
          menuImg: '1111',
          //分组id
          menuGroup: '1',
          //是否套餐
          menuIfMeal: '0',
          //是否热门
          popular:'0',
          //推荐
          recommend:'0',
          //打折
          discount:'',
          //是否上架
          putontheshelf:'1',
          //库存
          instock:'0',
          //菜品所属商家
          businessId:'1',
          //菜品介绍
          details:'',
          //折扣价
          discountPrice:'',
          //base64路径
          imgBase64:'',
          //分类名
          dishTypeName:''
        },
        //菜品口味集合
        flavorList:[{
          flavorid:1,
          flavorName:'不辣'
        },{
          flavorid:2,
          flavorName:'微辣'
        },{
          flavorid:3,
          flavorName:'正常'
        },{
          flavorid:4,
          flavorName:'狠辣'
        },{
          flavorid:5,
          flavorName:'变态辣'
        }],
        //是否打折
        isdiscount:[{
          id:1,
          value:"是"
        },{
          id:0,
          value:"否"
        }],
        //商品分类名称
        commodityType:'',
        //添加产品分类数组
        commodityTypelist:{
          dishTypeName:'',
          businessId:1
        },
        //商品管理页面弹出框
        isAddDishes: false,
        pushimg: false,
        findDishes: false,
        importDishes: false,
        dishesTemplate: false,
        //原料
        material: false,
        //要求
        isclaim: false,
        //编辑
        isedit: false,
        //分类下拉列表
        categorylist: [],
        //全部菜品
        findMenuAll: {},
        //查询单个菜品
        findMenuName:{},
        //按照id查询出的菜品
        findMenuID: '',
        //删除分类的id
        delDishTypeId:'',
        //按照id查询菜品信息集合
        base64Img:'',
        ImgName:"",
        findMenuIDList: {
          menuId: '',
          menuName: '',
          menuPrice: '',
          menuState: '',
          menuCount: '',
          flavorId: '',
          dishTypeId: '',
          menuImg: '',
          menuGroup: '',
          menuIfMeal: '',
          popular: '',
          recommend: '',
          discount: '',
          putontheshelf: '',
          instock: '',
          businessId: '',
          details: '',
          discountPrice: '',
          imgBase64: '',
          dishTypeName: '',
          goodsNumber: '',
        },
        updMenuIDList:{
          menu_id:'',
          menu_name:'',
          menu_price:'',
          menu_state:'',
          menu_count:'',
          flavor_id:'',
          dish_type_id:'',
          menu_img:'',
          menu_group:'',
          menu_if_meal:'',
            imgBase64:'',
        },
        dataTotal:'0',
        isedittableware: false,
        //修改菜品分类
        isEditcategory: false,
        //删除菜品分类
        doIdDelMenu:'',
        aaaa:{},
        dishTypeQuery:{
          page: {
            current: 1,
            size: 6
          },
        }
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //解决el-input组件层级过深导致视图无法刷新
      change($event) {
        this.$forceUpdate($event);
      },
      //加载下拉列表,表格
      test() {
        this.$axios.post("administration/dish-type/findDishTypeAll",this.dishTypeQuery).then(result => {
          this.categorylist = result.data.records;
        });
      },


      menuFindAll(){
        this.$axios.post("administration/menu/findMenuAll",this.menuBo).then(result => {
          this.findMenuAll = result.data.records;
        })
      },


      // 弹出修改菜品分类窗口
      updIsEditcategory(e) {
        this.isEditcategory = true;
        this.DishType.dishTypeId = e.dishTypeId;
      },
      //修改菜品分类方法
      doIdupdDishType() {
        this.$axios.post("administration/dish-type/updDishTypeName", this.DishType).then(result => {
          if (result.data){
              if (result.data > 0) {
                  alert("修改成功！");
                  this.test();
                  this.isEditcategory = false;
              } else {
                  alert("修改失败！");
                  this.test();
                  this.isEditcategory = false;
              }
          }else{
              this.$message({
                  showClose: true,
                  message: '抱歉您没有操作权限!',
                  type: 'error'
              });
          }
        })
      },
      // 按照id查询菜品信息
      findMenuId(e) {
        this.isedit = true
        this.findMenuID = e.menuId;
        this.$axios.post("/administration/menu/findIdMenu", this.findMenuID).then(result => {
          this.findMenuIDList = result.data;
        })
      },
      // 删除分类
      delDishType(e){
        this.delDishTypeId = e;
        console.log(e);
        this.$axios.post("/administration/dish-type/delDishType", this.delDishTypeId).then(result => {
          if (result.data > 0){
            alert("删除成功！");
            this.test();
          }
        })
      },
      //删除菜品
      delMenuId(e){
        this.doIdDelMenu = e;
        this.$axios.post("/administration/menu/delMenu", this.doIdDelMenu).then(result => {
            if (result.data){
                if (result.data > 0){
                    alert("删除成功！");
                    this.menuFindAll();
                }
            }else{
                this.$message({
                    showClose: true,
                    message: '抱歉您没有操作权限!',
                    type: 'error'
                });
            }

        })
      },
      //添加菜品
      doAddMenu() {
        if (this.addDishes.menuName == "") {
          alert("菜品名称不能为空！")
          return false;
        } else if (this.addDishes.dishTypeId == "") {
          alert("请选择分类");
          return false;
        } else if (this.addDishes.flavorId == "") {
          alert("请选择口味");
          return false;
        } else if (this.addDishes.details == "") {
          alert("请输入商品描述");
          return false;
        } else if (this.addDishes.menuPrice == "") {
          alert("请输入价格")
          return false;
        } else if (this.addDishes.discount == "") {
          alert("请选择是否折扣")
          return false;
        } else {
          this.$axios.post("/administration/menu/judgmentMenuName", this.addDishes.menuName).then(res => {
              if (res.data){
                  if (res.data == 0) {
                      this.$axios.post("/administration/menu/istMenu", this.addDishes).then(result => {
                          if (result.data > 0) {
                              alert("添加成功！")
                              this.menuFindAll()
                          } else {
                              alert("添加失败！");
                          }

                      })
                  }else {
                      alert("该商品已存在！");
                  }
              }else{
                  this.$message({
                      showClose: true,
                      message: '抱歉您没有操作权限!',
                      type: 'error'
                  });
              }

          })
        }
      },


      //修改菜品
      updMenuAll(){
        if (this.base64Img!=""){
          this.findMenuIDList.imgBase64 = this.base64Img;
          this.findMenuIDList.menuImg = this.ImgName
        }else {
          this.findMenuIDList.imgBase64 = "";
        }
        this.$axios.post("/administration/menu/updMenuAll", this.findMenuIDList).then(result => {
            if (result.data == 0) {
                if (result.data > 0){
                    alert("修改成功！");
                    this.isedit = false;
                    this.menuFindAll();
                }else {
                    alert("修改失败！");
                }
            }else {
                alert("该商品已存在！");
            }

        })
      },
      //是热门
      updPopulaTrue(e){
        this.$axios.post("/administration/menu/updPopulaTrue",e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);

      },
      //不是热门
      updPopulaFalse(e){
        this.$axios.post("/administration/menu/updPopulaFalse", e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //是推荐
      updrecommendTrue(e){
        this.$axios.post("/administration/menu/updrecommendTrue",e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //不是推荐
      updrecommendFalse(e){
        this.$axios.post("/administration/menu/updrecommendFalse", e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //打折
      upddiscountFalse(e){
        this.$axios.post("/administration/menu/upddiscountFalse",e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //不是打折
      upddiscountTrue(e){
        this.$axios.post("/administration/menu/upddiscountTrue", e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //上架
      updputontheshelfFalse(e){
        this.$axios.post("/administration/menu/updputontheshelfFalse",e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //不上架
      updputontheshelfTrue(e){
        this.$axios.post("/administration/menu/updputontheshelfTrue", e)
        setTimeout(() => {
          this.menuFindAll();
        }, 500);
      },
      //添加商品分类
      addCommodityType(){
        if (this.commodityTypelist.dishTypeName == ""){
          alert("分类名不能为空！");
          return false;
        }else {
          this.$axios.post("/administration/dish-type/judgmentDishTypeName",this.commodityTypelist.dishTypeName).then(res =>{
            if (res.data == 0){
              this.$axios.post("/administration/dish-type/addDishType", this.commodityTypelist).then(result => {
                  if (result.data){
                      if (result.data > 0){
                          alert("添加成功！");
                          this.menuFindAll();
                      }else {
                          alert("添加失败！");
                      }
                  }else{
                      this.$message({
                          showClose: true,
                          message: '抱歉您没有操作权限!',
                          type: 'error'
                      });
                  }

              })
            }else {
             alert("该分类已存在，无需重复添加！")
            }
          })
        }
      },
      findMenu(){
        this.$axios.post("/administration/menu/findMenuName", this.findmenuName).then(result => {
          this.findMenuAll= result.data;
        })
      },
      imageToBase64(){
        let files = document.getElementById('istImageFile').files[0];
        let fileName = document.getElementById('istImageFile').files[0].name
        this.addDishes.menuImg = fileName
        var reader = new FileReader()
        reader.readAsDataURL(files)
        reader.onload = () => {
          console.log('file 转 base64结果：' + reader.result)
          this.addDishes.imgBase64 = reader.result
        }
        reader.onerror = function (error) {
          console.log('Error: ', error)
        }
      },
      /**
       * 文件上传验证
       */
      fileImageVerification(){
        let files = document.getElementById('istImageFile').files[0];
        if (files==null){
          this.$message({
            showClose: true,
            message: '请选择餐品图片上传!',
            type: 'error'
          });
          return false
        }
        return true;
      },
      updimageToBase64(){
        let files = document.getElementById('updImageFile').files[0];
        let fileName = document.getElementById('updImageFile').files[0].name
        this.ImgName= fileName

        var reader = new FileReader()
        reader.readAsDataURL(files)
        reader.onload = () => {
          console.log('file 转 base64结果：' + reader.result)
          this.base64Img = reader.result

        }
        reader.onerror = function (error) {
          console.log('Error: ', error)
        }
      },
      /**
       * 文件上传验证
       */
      updfileImageVerification(){
        let files = document.getElementById('updImageFile').files[0];
        if (files==null){
          this.$message({
            showClose: true,
            message: '请选择餐品图片上传!',
            type: 'error'
          });
          return false
        }
        return true;
      },

    },
      mounted() {
      this.test();
      this.menuFindAll();
      // 在创建之前，添加body的style属性， 给花名册组件单独设置背景色
      document.querySelector("body").setAttribute('style', "background-color: WhiteSmoke;");
          this.$axios.post("restaurant-administration/administration/administration/dish-type").then(response=>{
              if (response.data!=null){
                  this.categorylist=response.data
              }
          })
    },
    // 在销毁前，将body的style属性删除
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },

  }
</script>

<style scoped>
    .page{
        width: 80vw;
        height: 100%;
        background-color: White;
    }
    .right_input{
        width: 10vw;
        padding-left: 40vw;
    }
    .no{
        width: 25px;
        height: 30px;
    }
    .btn-xs, .btn-group-xs > .btn {
        padding: 2px 6px;
        font-size: 11px;
        line-height: 1.5;
        border-radius: 1px;
    }
    .btn {
        box-shadow: 0 1px .5px rgba(0, 0, 0, .02);
        transition: .2s;
        font-family: inherit;
        margin-top: 5px;
    }
    .btn-block {
        display: block;
        width: 100%;
    }
    .btn-default {
        color: #565656;
        background-color: #fff;
        border-color: #eee;
    }
    .btn {
        margin-bottom: 0;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid Grey;
        white-space: nowrap;
        user-select: none;
        border-radius:5px
    }
    .xinxi{
        padding-bottom: 15px;
    }
    .name_text{
        width: 80%  ;
    }
    .boottom_text{
        width: 20%;
        margin-left: 3%;
    }
    .materialname{
       height: 100%;
       padding-right: 90%;
       background-color: #eeeeee;
    }
    .materialname div{
        height: 2vw;
        width: 100%;
        padding-top: 10px;
        font-size: 20px;
    }
    .meterialusenum{
        width: 10%;
    }
    .materiaAttributes{
        padding: 1vw;
    }
    .claim_text{
        width: 60%;
        padding-right: 1vw;
    }
    .claim{
        margin:5px
    }
    .Matching{
        width: 100%;
    }

    .Matching_main_input{
        padding-right: 2vw;
        width: 15%;
    }
    .Matching_lable{
        padding-top: 1vw;
        padding-right: 40vw;

    }
    .mainbody{
        padding-top: 1vw;
    }
    .Matching_main{
        padding-top: 1vw;
    }
    .boottom_texts{
        width: 15%;
        margin-left: 3%;
    }
    .font{
        font-weight:bold;
    }
    .vip_img{
        width: 10px;
        height: 10px;
    }
    .card_type{
        padding-top: 1vw;
    }
    .boottom_textss{
        width: 40%;
        margin-left: 5%;
    }
</style>